<template>
    <div style="height: 3px;background: rgba(255,255,255,0.18);">
       <div :style="{width:percent+'%'}" style="height: 100%;" class="progressItem">
         <div style="width: 10px;height: 10px;border-radius: 50%;background:rgba(165,132,248,0.4);position: absolute;right: -5px;top:-3.5px;" class="flex">
           <div style="width:6px;height:6px;border-radius:50%;background:#A584F8;margin: 0 auto"></div>
         </div>
       </div>
    </div>
</template>
<style>
  .progressItem{
    background: -webkit-linear-gradient(left,#5A50D7,#AA87FA);
    background: -o-linear-gradient(right,#5A50D7,#AA87FA);
    background: -moz-linear-gradient(right,#5A50D7,#AA87FA);
    background: linear-gradient(to right,#5A50D7,#AA87FA);
    position: relative;
  }
</style>
<script>
export default{
  props:{
    percent:{
      type:Number,
      default:30
    }
  },
  data(){
    return {
      msg: 'hello vue'
    }
  }
}
</script>
